<template>
	<view class="myCenter">
		<view class="myCenter-header">
			<view class="myCenter-header-box">
				<image class="more-icon" src="../../static/img/more-icon.png" mode="" @click="moreShow = true"></image>
			</view>
		</view>
		<u-overlay :show="moreShow" opacity="0.8" @click="moreShow = false">
			<view class="more-option">
				<view class="more-option-item" @click="toLink('/pages/editMyInfo/editMyInfo',true)">
					<image class="more-option-item-icon" src="../../static/img/edit-icon.png" mode=""></image>
					<text>编辑</text>
				</view>
				<u-divider text="" lineColor="rgba(255,255,255,0.3)"></u-divider>
				<view class="more-option-item" @click="sharePage = true">
					<image class="more-option-item-icon" src="../../static/img/share-icon.png" mode=""></image>
					<text>转发</text>
				</view>
			</view>
		</u-overlay>
	
		<view class="myCenter-box">
			<view class="myCenter-info" v-if="userInfo">
				<view class="myCenter-avatar">
					<image @click="toLink('/pages/editMyInfo/editMyInfo')" class="avatar-img" :src="(userInfo && userInfo.avatar)?userInfo.avatar:avatar" mode=""></image>
					<u-icon class="my-sex my-sex-man" v-if="userInfo.gender === 0" name="man" color="#ffffff" size="20"></u-icon>
					<u-icon class="my-sex my-sex-woman" v-if="userInfo.gender == 1" name="woman" color="#ffffff" size="20"></u-icon>
				</view>
				<view class="myCenter-nick">
					<text class="single-line">{{userInfo.realName || userInfo.userName}}</text>
					<view class="my-badge" @click="toLink('/pages/member/member')">
						<image class="lv-con" v-if="userInfo.level == 1" src="../../static/img/lv1-icon.png" mode=""></image>
						<image class="lv-con" v-if="userInfo.level == 2" src="../../static/img/lv2-icon.png" mode=""></image>
						<image class="lv-con" v-if="userInfo.level == 3" src="../../static/img/lv3-icon.png" mode=""></image>
						<view class="lv-text"><text>等级{{userInfo.level}}</text></view>
					</view>
				</view>
				<view class="myCenter-phone"><text>{{userInfo.mobile}}</text></view>
			</view>
			
			<view class="no-login" v-else @click="toLink('/pages/login/login')">
				<image src="../../static/img/noLogin-headImg.png" class="avatar-img" mode=""></image>
				<text>请先登录</text>
			</view>
			
			<view class="myCenter-main">
				<!-- 我的钱包 -->
				<view class="myCenter-main-chunk">
					<view class="myCenter-main-title"><text>我的钱包</text></view>
					<view class="myCenter-main-wallet">
						<view class="myCenter-main-wallet-item" @click="toLink('/pages/integralMall/integralMall',true)">
							<image class="_wallet-item-icon" src="../../static/img/jf-icon.png" mode=""></image>
							<view class="_wallet-item-info">
								<view class="_wallet-item-info-label"><text>积分</text></view>
								<view class="_wallet-item-info-val">
									<text v-if="userInfo">{{userInfo.integral}}</text>
									<text v-else>0</text>
								</view>
							</view>
						</view>
						<view class="myCenter-main-wallet-item" @click="toLink('/pages/myWallet/myWallet',true)">
							<image class="_wallet-item-icon" src="../../static/img/yue-icon.png" mode=""></image>
							<view class="_wallet-item-info">
								<view class="_wallet-item-info-label"><text>余额</text></view>
								<view class="_wallet-item-info-val">
									<text v-if="userInfo">{{userInfo.balance}}</text>
									<text v-else>0</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<!-- 我的藏品 -->
				<view class="myCenter-main-chunk">
					<view class="myCenter-main-title"><text>我的藏品</text></view>
					<view class="myCenter-main-collection">
						<view class="myCenter-main-collection-item" @click="toLink('/pages/myCollectionList/myCollectionList',true)">
							<view class="_main-collection-item-icon"><image class="_main-collection-item-icon-img" src="../../static/img/collection-list-icon.png" mode=""></image></view>
							<view class="_main-collection-item-title"><text>藏品清单</text></view>
						</view>
						<view class="myCenter-main-collection-item" @click="toLink('/pages/mySynthesis/mySynthesis',true)">
							<view class="_main-collection-item-icon"><image class="_main-collection-item-icon-img" src="../../static/img/collection-compose-icon.png" mode=""></image></view>
							<view class="_main-collection-item-title"><text>藏品合成</text></view>
						</view>
						<view class="myCenter-main-collection-item" @click="toLink('/pages/myCollectionGive/myCollectionGive',true)">
							<view class="_main-collection-item-icon"><image class="_main-collection-item-icon-img" src="../../static/img/collection-gift-icon.png" mode=""></image></view>
							<view class="_main-collection-item-title"><text>藏品转增</text></view>
						</view>
					</view>
				</view>
				
				<!-- 其他 -->
				<view class="myCenter-main-chunk">
					<view class="myCenter-main-title"><text>其他</text></view>
					<view class="myCenter-main-other">
						<view class="myCenter-main-other-box">
							<view class="_other-item" @click="toLink('/pages/myExchange/myExchange',true)"><text>兑换</text><image class="_other-item-right" src="../../static/img/right-icon.png" mode=""></image></view>
							<view class="_other-item" @click="toLink('/pages/mySetting/mySetting',true)"><text>设置</text><image class="_other-item-right" src="../../static/img/right-icon.png" mode=""></image></view>
							<view class="_other-item" @click="toLink('/pages/contactUs/contactUs')"><text>联系我们</text><image class="_other-item-right" src="../../static/img/right-icon.png" mode=""></image></view>
							<view class="_other-item" v-if="token" @click="loginOut"><text>退出登录</text><image class="_other-item-right" src="../../static/img/right-icon.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<share-page v-if="sharePage" :shareUrl="shareUrl" :copyUrl="copyUrl" @close="closeShare"></share-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moreShow:false,
				sharePage:false,
				userInfo:null,
				avatar:require('@/static/img/careful-icon.png'),
				token:'',
				shareUrl:'',
				copyUrl:'',
			};
		},
		onLoad() {

		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.showToast({
					title:'请登录',
					icon:'none'
				})
				if (!uni.getStorageSync('loginPage')) {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				} else {
					uni.removeStorageSync('loginPage')
				}
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
			} else {
				this.token = uni.getStorageSync('token');
				this.getUserInfo()
			}
		},
		methods:{
			toLink(link,isLogin) {
				if (link) {
					if (isLogin) {
						if (this.token) {
							uni.navigateTo({
								url:link
							})
						} else {
							uni.showToast({
								title:'请登录',
								icon:'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							},800)
						}
					} else {
						uni.navigateTo({
							url:link
						})
					}
				}
			},
			closeShare(e) {
				console.log(e)
				this.sharePage = e;
			},
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.userInfo = res.data;
						uni.setStorageSync('userInfo',res.data)
						if (Window) {
							let link = window.location.href+'?userCode='+this.userInfo.userCode;
							this.copyUrl = link;
							this.$api.qrCodeCreate({content:link}).then(res => {
								// console.log(res)
								if (res.code == 200) {
									this.shareUrl = res.data.url;
								} else {
									this.shareUrl = link;
								}
							})
						}
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			loginOut() {
				// 点击退出登录按钮后清空数据
				uni.clearStorage();
				this.userInfo = null;
				this.token = '';
				uni.showToast({
					title:'退出成功',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="less">
	.myCenter{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.myCenter-header{
			width: 100%;
			height: 88rpx;
			// background-color: #16181D;
			position: sticky;
			top: 0;
			z-index: 2;
			.myCenter-header-box{
				width: 100%;
				height: 100%;
				position: relative;
				.more-icon{
					width: 48rpx;
					height: 20rpx;
					position: absolute;
					top: 0;
					left: 0;
					right:0;
					bottom: 0;
					margin: auto;
					margin-right: 44rpx;
				}
			}
		}
		.more-option{
			width: 278rpx;
			background: #262A34;
			border-radius: 40rpx;
			position: fixed;
			top: 68rpx;
			right: 32rpx;
			display: flex;
			flex-direction: column;
			.more-option-item{
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 26rpx;
				margin-left: 44rpx;
				margin-bottom: 22rpx;
				.more-option-item-icon{
					width: 48rpx;
					height: 48rpx;
					min-width: 48rpx;
					margin-top: 4rpx;
					margin-right: 30rpx;
				}
			}
			/deep/.u-divider{
				margin: 0;
			}
		}
		.myCenter-box{
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			.myCenter-info{
				width: 100%;
				.myCenter-avatar{
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					margin: 38rpx auto 0;
					background-color: #000000;
					position: relative;
					.avatar-img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.my-sex{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						position: absolute;
						bottom: 0;
						right: 0;
					}
					.my-sex-man{
						background: #6AB2FF;
					}
					.my-sex-woman{
						background: #EA688A;
					}
				}
				.myCenter-nick{
					text-align: center;
					display: flex;
					flex-wrap: nowrap;
					justify-content: center;
					font-size: 56rpx;
					color: #FFFFFF;
					align-items: center;
					height: 84rpx;
					margin-top: 32rpx;
					.my-badge{
						width: 156rpx;
						height: 68rpx;
						position: relative;
						display: flex;
						justify-content: flex-start;
						.lv-con{
							width: 68rpx;
							height: 68rpx;
							min-width: 68rpx;
						}
						.lv-text{
							width: 120rpx;
							height: 48rpx;
							background: rgba(233,243,254,0.3);
							border-radius: 0px 200px 200px 0px;
							text-align: center;
							line-height: 48rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							margin-left: 48rpx;
						}
					}
				}
				.myCenter-phone{
					text-align: center;
					line-height: 48rpx;
					font-size: 28rpx;
					font-family: Helvetica;
					color: #9D7DFF;
				}
			}
			.no-login{
				text-align: center;
				line-height: 80rpx;
				font-size: 48rpx;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				.avatar-img{
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					margin: 0 auto;
				}
			}
			.myCenter-main{
				width: 100%;
				margin-top: 48rpx;
				.myCenter-main-chunk{
					margin-top: 48rpx;
				}
				.myCenter-main-title{
					font-size: 26rpx;
					color: #5E6272;
					line-height: 48rpx;
				}
				.myCenter-main-wallet{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-top: 16rpx;
					.myCenter-main-wallet-item{
						width: 314rpx;
						height: 180rpx;
						background: #262A34;
						border-radius: 24rpx;
						padding: 0rpx 0 0 32rpx;
						display: flex;
						flex-wrap: nowrap;
						justify-content: flex-start;
						align-items: center;
						._wallet-item-icon{
							width: 100rpx;
							height: 100rpx;
							min-width: 100rpx;
						}
						._wallet-item-info{
							width: calc(100% - 124rpx);
							margin-left: 24rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							._wallet-item-info-label{
								font-size: 28rpx;
								font-weight: 300;
								color: #FFFFFF;
								line-height: 48rpx;
							}
							._wallet-item-info-val{
								font-size: 28rpx;
								font-family: Helvetica;
								color: #FFFFFF;
								line-height: 48rpx;
								font-weight: 600;
							}
						}
					}
				}
				.myCenter-main-collection{
					width: 100%;
					height: 178rpx;
					background: #262A34;
					border-radius: 24rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-top: 16rpx;
					.myCenter-main-collection-item{
						flex: 1;
						._main-collection-item-icon{
							width: 60rpx;
							height: 60rpx;
							margin: 32rpx auto 0;
							._main-collection-item-icon-img{
								width: 100%;
								height: 100%;
							}
						}
						._main-collection-item-title{
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
							text-align: center;
							line-height: 48rpx;
						}
					}
				}
				.myCenter-main-other{
					width: 100%;
					.myCenter-main-other-box{
						padding-bottom: 20rpx;
					}
					._other-item{
						padding: 24rpx 48rpx;
						box-sizing: border-box;
						background: #262A34;
						border-radius: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						position: relative;
						margin-top: 16rpx;
						._other-item-right{
							width: 20rpx;
							height: 30rpx;
							min-width: 20rpx;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							margin-right: 38rpx;
						}
					}
				}
			}
		}
	}
</style>
